<template>
  <div class="newflow">
    <div>
      <el-input
        v-model="form.title"
        placeholder="请输入流程名称"
        size="normal"
        clearable
        style="width: 400px"
      ></el-input>
    </div>
    <div class="newflow-one" @click="onAddStep">
      <i
        class="el-icon-circle-plus-outline"
        style="font-size: 24px; color: #409eff"
      ></i>
      添加步骤
    </div>
    <el-steps
      direction="vertical"
      v-if="steplist.length"
      :style="{ height: 40 * steplist.length + 'px', padding: 30 + 'px' }"
    >
      <el-step
        :title="item"
        v-for="(item, index) in steplist"
        :key="index"
        @click.native="onEdit(index)"
      ></el-step>
    </el-steps>
    <el-button
      :loading="loading"
      type="primary"
      @click="onSave"
      v-if="steplist.length && form.title"
      style="margin-top: 40px"
      >保存</el-button
    >
  </div>
</template>

<script>
import { postAdminApiSetJointlystep } from "@/api";
export default {
  data() {
    return {
      loading: false,
      steplist: [],
      form: {
        title: "",
        steplist: [],
      },
    };
  },
  activated() {
    this.steplist = [];
    this.form = {
      title: "",
      steplist: [],
    };
  },
  methods: {
    onSave() {
      let that = this;
      that.loading = true;
      let { steplist, form } = this;
      form.steplist = [];
      if (form.title) {
        this.$confirm("保存后将不可修改请谨慎操作, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            steplist.forEach((e, index) => {
              let obj = {
                name: e,
                key: index + 1,
                status: 0,
                time: "",
              };
              form.steplist.push(obj);
            });
            postAdminApiSetJointlystep(form).then((res) => {
              this.$message({
                type: "success",
                message: "保存成功!",
              });
              that.loading = false;
              this.$router.go(-1);
            });
          })
          .catch(() => {
            that.loading = false;
            this.$message({
              type: "info",
              message: "已取消保存",
            });
          });
      } else {
        that.loading = false;
        this.$message({
          type: "info",
          message: "请输入流程名称",
        });
      }
    },
    onEdit(idx) {
      let that = this;
      console.log(6666666666);
      let steplist = this.steplist;
      this.$prompt("编辑步骤名称", "编辑步骤", {
        inputValue: steplist[idx],
        cancelButtonClass: "delcancelButtonClass",
        confirmButtonText: "确定",
        cancelButtonText: "删除该步骤",
        distinguishCancelAndClose: true,
        beforeClose: (action, instance, done) => {
          if (action == "cancel") {
            steplist.splice(idx, 1);
            that.steplist = steplist;
            this.$message({
              type: "info",
              message: "删除成功",
            });
          }
          done();
        },
        inputValidator: (value) => {
          if (value) return true;
          return false;
        },
        inputErrorMessage: "请输入步骤名称",
      })
        .then(({ value }) => {
          steplist[idx] = value;
          that.$set(that.steplist, steplist);
          this.$message({
            type: "success",
            message: "编辑成功",
          });
        })
        .catch(() => {});
    },
    onAddStep() {
      let that = this;
      let steplist = this.steplist;
      this.$prompt("请输入步骤名称", "添加步骤", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (value) => {
          if (value) return true;
          return false;
        },
        inputErrorMessage: "请输入步骤名称",
      })
        .then(({ value }) => {
          steplist.push(value);
          that.steplist = steplist;
          this.$message({
            type: "success",
            message: "添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.newflow {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  &-one {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-top: 20px;
    width: 400px;
    > i {
      margin-right: 2px;
    }
  }
}
</style>